import React, { FC, useEffect, useState } from 'react';
import * as echarts from 'echarts';
import { Row, Col, Button } from 'antd'
import { getData } from '../../api/data';
interface IEChartsProps {
  
};

const ECharts:FC<IEChartsProps> = () => {
  const [data, setData] = useState([5, 20, 36, 10, 10, 20])

  const changeData = () => {
    const arr = [5, 20, 36, 10, 10, 20]
    const newArr:number[] = []
    arr.forEach(item => {
      newArr.push(item + Math.floor(100 + Math.random()* 100))
    })
    setData(newArr)
  }

  useEffect(() => {
    var myBarChart = echarts.init(document.getElementById('barECharts') as HTMLDivElement);
    const option = {
      title: {
        text: '柱状图'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      legend: {
        layout: 'vertical',
        align: 'right',
        verticalAlign: 'middle'
      },
      series: [
        {
          name: '销量',
          type: 'bar',
          // data: [5, 20, 36, 10, 10, 20]
          data
        },
        {
          name: '业绩',
          type: 'bar',
          // data: [5, 20, 36, 10, 10, 20]
          data: [20, 36, 10, 10, 20, 60]
        }
      ]
    }
    myBarChart.setOption(option)
  }, [data])
  useEffect(() => {
    var myLineChart = echarts.init(document.getElementById('lineCharts') as HTMLDivElement);
    const option = {
      title: {
        text: '折线图'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'line',
          // data: [5, 20, 36, 10, 10, 20]
          data
        }
      ]
    }
    myLineChart.setOption(option)
  }, [data])

  useEffect(() => {
    var myPieChart = echarts.init(document.getElementById('pieECharts') as HTMLDivElement);
    const option = {
      title: {
        text: '饼状图'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'pie',
          // data: [5, 20, 36, 10, 10, 20]
          data
        }
      ]
    }
    myPieChart.setOption(option)
  }, [data])

  const [dbData, setDbData] = useState([])
  useEffect(() => {
    var mydbECharts = echarts.init(document.getElementById('dbECharts') as HTMLDivElement);
    getData().then(res => {
      setDbData(res.data.data)
    })
    const xAxisArr: string[] = []
    const dataArr: number[] = []
    dbData.forEach((item: { x: string, val: number }) => {
      xAxisArr.push(item.x)
      dataArr.push(item.val)
    })
    const option = {
      title: {
        text: '饼状图'
      },
      tooltip: {},
      xAxis: {
        data: xAxisArr
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'line',
          // data: [5, 20, 36, 10, 10, 20]
          data: dataArr
        }
      ]
    }
    mydbECharts.setOption(option)
    window.addEventListener('resize',() => { 
      mydbECharts && mydbECharts.resize();
    })
  }, [dbData])
  return (
    <>
      <h1>echarts <Button onClick={ changeData }>切换数据</Button></h1>
      <Row gutter={30}>
        <Col span={12}>
          <h2>柱状图</h2>
          <div id="barECharts" style={{ width: '100%', height: 300, backgroundColor: '#efefef'}}></div>
        </Col>
        <Col span={12}>
          <h2>折线图</h2>
          <div id="lineCharts" style={{ width: '100%', height: 300, backgroundColor: '#efefef'}}></div>
        </Col>
      </Row>
      <Row gutter={30}>
        <Col span={12}>
          <h2>饼状图</h2>
          <div id="pieECharts" style={{ width: '100%', height: 300, backgroundColor: '#efefef'}}></div>
        </Col>
        <Col span={12}>
          <h2>数据库数据</h2>
          <div id="dbECharts" style={{ width: '100%', height: 300, backgroundColor: '#efefef'}}></div>
        </Col>
      </Row>
    </>
  )
};

export default ECharts;